<template>
  <!-- 只能有一个div根标签 -->
  <div class="container">
    <div class="btn_wrapper">
      <span style="font-size: 12px; color: pink"
        >说明：目前支持学科和关键字条件筛选</span
      >
      <el-button
        @click="btn"
        style="justify-content: flex-end"
        type="success"
        icon="el-icon-edit"
        >新增试题</el-button
      >
    </div>

    <SearchQuestion @subjectList="subjectList"></SearchQuestion>
    <SubjectList :tableData="tableData" :data="data" :counts="counts" @dataChange="dataChange"></SubjectList>
  </div>
</template>

<script>
import SearchQuestion from './../components/search-question.vue'
import SubjectList from './../components/subject-list.vue'
import { Subjects } from '../../api/hmmm/questions'
export default {
  name: 'QuestionsList',
  data () {
    return {
      tableData: [],
      data: {
        page: 1,
        pagesize: 5
      },
      counts: 0
    }
  },
  created () {
    this.subjectList()
  },
  mounted () {},
  components: {
    SearchQuestion,
    SubjectList
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    btn () {
      this.$router.push({ name: 'questions-new' })
    },
    // 基础题库列表
    async subjectList (ruleForm) {
      let data = this.data
      if (ruleForm !== undefined) {
        Object.keys(ruleForm).forEach((keys) => {
          if (ruleForm[keys] !== '') {
            const obj = { [keys]: ruleForm[keys] || '' }
            data = { ...data, ...obj }
          }
        })
      }
      try {
        const {
          data: mydata
        } = await Subjects(data)
        this.counts = mydata.counts
        this.tableData = mydata.items
      } catch (error) {
        return false
      }
    },
    dataChange (data) {
      this.data = data
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
